<template>
  <div class="example2">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <div>
      <div class="border">
        <a href="JavaScript:;" class="look-code" @click="lookCode('digitCard')"
          >代码</a
        >
        <data-v-digitCard
          :cardType="1"
          title="56897"
          subtitle="市场份额"
          customClass="customName"
        >
          <div>自定义内容</div>
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="2" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="3" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="4" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="5" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="6" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="7" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard :cardType="8" title="56897" subtitle="市场份额">
        </data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="9"
          title="56897"
          subtitle="市场份额"
          :run="true"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="10"
          title="56897"
          :run="true"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="11"
          title="56897"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="12"
          title="56897"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="13"
          title="56897"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="14"
          title="56897"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="15"
          title="56897"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <div class="border">
        <data-v-digitCard
          :cardType="16"
          title="56897"
          subtitle="市场份额"
        ></data-v-digitCard>
      </div>
      <!-------------data-v-cardProgress-------------->
      <div class="border border2">
        <a
          href="JavaScript:;"
          class="look-code"
          @click="lookCode('cardProgress')"
          >代码</a
        >
        <data-v-cardProgress
          :cardType="1"
          title="56897"
          :mainText="count + '%'"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="2"
          title="56897"
          :mainText="count + '%'"
          customClass="custom-class"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="3"
          title="56897"
          :mainText="count + '%'"
          customClass="custom-class3"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="4"
          title="56897"
          :mainText="count + '%'"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="5"
          title="56897"
          :mainText="count + '%'"
          customClass="custom-class3"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="6"
          title="56897"
          :mainText="count + '%'"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="7"
          title="56897"
          :mainText="count + '%'"
          subtitle="544"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="8"
          :mainText="count"
          customClass="custom-class8"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="9"
          title="56897"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
      <div class="border border2">
        <data-v-cardProgress
          :cardType="10"
          title="56897"
          subtitle="市场份额"
        ></data-v-cardProgress>
      </div>
    </div>
    <!--digitPanel-->
     <a href="JavaScript:;" class="look-code" @click="lookCode('digitPanel')"
        >代码</a
      >
    <div class="row">
      <data-v-digitPanel
        :cardType="1"
        title="568"
        subtitle="市场份"
        customClass="digitPanel1"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="1"
        title="568"
        subtitle="市场份"
        customClass="digitPanel2"
        style="margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="1"
        title="568"
        subtitle="市场份"
        customClass="digitPanel3"
        style="margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="2"
        title="568"
        subtitle="市场份额"
        style="margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="3"
        title="568"
        subtitle="市场份额"
        style="margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="4"
        title="568"
        subtitle="市场份额"
        style="margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="5"
        title="568"
        subtitle="市场份额"
        count1="1200"
        count2="1200"
        style="margin-left: 10px; width: 300px; height: 100px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="6"
        title="568"
        subtitle="市场份额 :"
        style="width: 150px; margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="7"
        title="568"
        subtitle="市场份额 :"
        style="width: 150px; margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="8"
        title="568"
        style="width: 150px; margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="9"
        title="568"
        style="margin-left: 10px"
        subtitle="市场份额 "
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="10"
        title="568"
        subtitle="市场份额 "
        style="width: 120px; height: 40px; margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="11"
        title="5,688"
        subtitle="市场份额 "
        style="width: 120px; height: 40px; margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="12"
        title="5,688"
        subtitle="市场份额 "
        count1="86%"
        style="width: 180px; height: 80px; margin-left: 10px"
      ></data-v-digitPanel>
      <data-v-digitPanel
        :cardType="13"
        :title="count+'%'"
        subtitle="市场份额 "
        style="width: 200px;margin-left: 10px"
        partitionColor='#000'
      ></data-v-digitPanel>
    </div>
    <div class="row"></div>
    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
export default {
  name: "example5",
  components: {
    CodeContainer,
  },
  data() {
    return {
      isShowCode: false,
      chartOptions: {},
      count: 0,
      rankList: [
        { name: "add", count: 811 },
        { name: "sea", count: 116 },
        { name: "aee", count: 80 },
        { name: "yhl", count: 6 },
        { name: "sea", count: 6 },
        { name: "add", count: 80 },
        { name: "sea", count: 6 },
        { name: "aee", count: 80 },
        { name: "yhl", count: 6 },
        { name: "sea", count: 6 },
      ],
      indicator: [
        { name: "（sales）", max: 6500 },
        { name: "（Administration）", max: 16000 },
        { name: "（Information\nTechology）", max: 30000 },
        { name: "（Customer\nSupport）", max: 38000 },
        { name: "（Development）", max: 52000 },
        { name: "（Marketing）", max: 25000 },
      ],
      maxVal: 1000,
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then((res) => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    },
  },
  mounted() {
    let count = 0;
    setInterval(() => {
      if (count >= 100) {
        count = 0;
      }
      count++;
      this.count = count;
    }, 100);
  },
};
</script>
<style>
.example2 {
  padding: 5px;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  background: #000 url(./example1-img/gridBg.png);
}
.example2 > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.border {
  padding: 10px;
  border: 1px solid #5e6163;
  box-sizing: border-box;
  height: 100px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-bottom: 5px;
  width: calc(12.5% - 10px);
}
.border2 {
  height: 200px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  margin-top: 20px;
}
.border::-webkit-scrollbar {
  display: none;
}

.border a {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: #5e6163 !important;
  font-size: 13px;
  margin-bottom: 5px;
}
.border a:hover {
  color: rgba(10, 175, 252, 0.952) !important;
}

.customName {
  color: red;
}
.custom-class .main-text {
  color: red;
}
.custom-class3 .main-text {
  font-size: 15px !important;
  margin-top: -3px;
}
.digitPanel1 {
  width: 70px !important;
}
.digitPanel2 .container-body {
  background-image: linear-gradient(to bottom, #edb462, #da6d1d);
}

.digitPanel2 .container-subtitle,
.digitPanel2 .container-title {
  color: #0b1d2a;
}
.digitPanel3 .container-body {
  background-image: linear-gradient(to bottom, #30c0e5, #078ad8);
}
.digitPanel3 .container-subtitle,
.digitPanel3 .container-title {
  color: #0b1d2a;
}
</style>
